<template>
  <div class="area_box" :style="{maxHeight:maxHeight}">
    <div class="area_content" ref="area_content" contenteditable="true" @focus="focusChange(true)" @blur="focusChange(false)"  @keyup="changeContent"></div>
  </div>
</template>

<script>
  export default {
    name: 'LsTextarea',
    props: {
      value: String,
      initType: String,
      initFocus: {
        type: Boolean,
        default: false
      },
      maxHeight: {
        type: String,
        default: '160px'
      }
    },
    data () {
      return {
        isFocus:false
      }
    },
    methods: {
      init(content){
        let area = this.$refs.area_content;
        if (this.initType === 'text') {
          area.innerText = content || this.value;
        } else {
          area.innerHTML = content || this.value;
        }
        if (this.initFocus) {
          this.keepLastIndex(area)
        }
      },
      focusChange(focus) {
        setTimeout(() => {
          this.isFocus = focus
        }, 10)
      },
      setData(str) {
        let area = this.$refs.area_content;
        if (this.getSelectionText()){
          return this.replaceSelectionWithHtml(str)
        }
        function fC() {
          // 获得被选择的元素
          let selection = window.getSelection ? window.getSelection() : document.selection;
          // createRange()返回新创建的 Range 对象，两个边界点都被设置为文档的开头
          let range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
          // ie
          if (!window.getSelection) {
            selection = window.getSelection ? window.getSelection() : document.selection;
            range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
          } else {
            // range.collapse(false);//true 折叠到 Range 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false
            let ctf = range.createContextualFragment(str);
            let ctfLastChild = ctf.lastChild;
            while (ctfLastChild && ctfLastChild.nodeName.toLowerCase() === 'br' && ctfLastChild.previousSibling && ctfLastChild.previousSibling.nodeName.toLowerCase() === 'br') {
              let e = ctfLastChild;
              ctfLastChild = ctfLastChild.previousSibling;
              ctf.removeChild(e)
            }
            range.insertNode(ctf);
            if (ctfLastChild) {
              range.setEndAfter(ctfLastChild);
              range.setStartAfter(ctfLastChild)
            }
            selection.removeAllRanges();
            selection.addRange(range)
          }
        }

        if (!this.isFocus) {
          area.focus();
          setTimeout(() => {
            this.keepLastIndex(area)
            fC()
          }, 5)
        } else {
          fC()
        }
      },
      // 设置光标在最后 没有光标的情况下
      keepLastIndex(area) {
        if (window.getSelection) { //ie11 10 9 ff safari
          area.focus(); //解决ff不获取焦点无法定位问题
          let range = window.getSelection(); //创建range
          range.selectAllChildren(area); //range 选择area下所有子内容
          range.collapseToEnd(); //光标移至最后
        } else if (document.selection) { //ie10 9 8 7 6 5
          let range = document.selection.createRange(); //创建选择对象
          range.moveToElementText(area); //range定位到area
          range.collapse(false); //光标移至最后
          range.select();
        }
      },
      // 获取选中的html内容
      getSelectionText() {
        var html = '';
        if (typeof window.getSelection !== 'undefined') {
          let sel = window.getSelection();
          if (sel.rangeCount) {
            let container = document.createElement('div');
            for (let i = 0, len = sel.rangeCount; i < len; ++i) {
              container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
          }
        } else if (typeof document.selection !== 'undefined') {
          if (document.selection.type === 'Text') {
            html = document.selection.createRange().htmlText;
          }
        }
        return html
      },
      // 替换选中区域
      replaceSelectionWithHtml(html) {
        var range;
        if (window.getSelection && window.getSelection().getRangeAt) {
          range = window.getSelection().getRangeAt(0);
          range.deleteContents();
          let div = document.createElement('div');
          div.innerHTML = html;
          let frag = document.createDocumentFragment(), child;
          // eslint-disable-next-line no-cond-assign
          while (child = div.firstChild) {
            frag.appendChild(child);
          }
          range.insertNode(frag);
        } else if (document.selection && document.selection.createRange) {
          range = document.selection.createRange();
          range.pasteHTML(html);
        }
      },
      // 获取内容
      getContent(){
        return this.$refs.area_content.innerHTML
      },
      changeContent(){
        this.$emit('input',this.getContent())
      }
    },
    mounted() {
      if (this.initType || this.value !== '') {
        this.init()
      }
    }
  }
</script>

<style scoped>
  .area_box{
    min-height: 30px;
    background: #f5f2f0;
    border-radius: 20px;
    overflow: auto;
  }
  .area_content{
    width:100%;
    height:100%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
    word-wrap:break-word;
    word-break:break-all;
  }
</style>
